<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <title>健身俱乐部 - 在线预约</title>

    <style>
        .success { color: green; }
        .error { color: red; }
        .form-group { margin-bottom: 1rem; }
        label { display: inline-block; width: 80px; text-align: right; margin-right: 10px; }
        input, select { padding: 5px; }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { padding: 8px; border: 1px solid #ddd; text-align: center; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>


<h1>在线预约</h1>
<a href="${pageContext.request.contextPath}/index.jsp" class="back-btn">返回</a>
<div class="success">${message}</div>
<div class="error">${error}</div>

<!-- 1. 显示项目表内容 -->
<h2>可预约项目列表</h2>
<table>
    <thead>
    <tr>
        <th>项目ID</th>
        <th>项目名称</th>
        <th>项目描述</th>
        <th>每小时价格</th>
    </tr>
    </thead>
    <tbody>
    <!-- 从数据库动态加载项目数据 -->
    <c:forEach var="project" items="${projectList}">
        <tr>
            <td>${project.projectId}</td>
            <td>${project.projectName}</td>
            <td>${project.description}</td>
            <td>${project.pricePerHour} 元</td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<!-- 2. 预约表单（改为输入项目ID） -->
<form action="ReservationServlet" method="post">
    <input type="hidden" name="memberId" value="${sessionScope.member.memberId}" />

    <div class="form-group">
        <label>会员姓名：</label>
        ${sessionScope.member.memberName}
    </div>
    <div class="form-group">
        <label>会员等级：</label>
        ${sessionScope.member.membershipLevel}（${sessionScope.member.discountRate * 10}折）
    </div>

    <div class="form-group">
        <label>项目ID：</label>
        <input type="number" name="projectId" min="1" required />
        <small>请输入上方列表中的项目ID</small>
    </div>

    <div class="form-group">
        <label>预约时间：</label>
        <input type="datetime-local" name="reservationTime" required />
        <small>请选择未来的时间</small>
    </div>

    <div class="form-group">
        <label>&nbsp;</label>
        <input type="submit" value="提交预约" />
    </div>
</form>
</body>
</html>